<template>
	<div>
		<home-header></home-header>
		<home-swiper :swiperList="swiperList"></home-swiper>
		<home-icons :iconList="iconList"></home-icons>
		<recommend :recommendList="recommendList"></recommend>
		<weekend :weekendList="weekendList"></weekend>
	</div>
</template>

<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import Recommend from './components/Recommend.vue'
import Weekend from './components/Weekend.vue'

import {mapState} from 'vuex'

import axios from 'axios'
	export default{
		components:{
			HomeHeader,
			HomeSwiper,
			HomeIcons,
			Recommend,
			Weekend
		},
		data(){
			return{
				swiperList:[],
				iconList:[],
				recommendList:[],
				weekendList:[],
				lastCity:""
			}
		},
		computed:{
			...mapState(["city"])
		},
		methods:{
			getHomeInfo(){
				axios.get('/api/index.json?city='+this.city).then(this.getHomeInfoSucc)
			},
			getHomeInfoSucc(res){
				if(res.data.ret){
					this.swiperList=res.data.data.swiperList
					this.iconList=res.data.data.iconList
					this.recommendList=res.data.data.recommendList
					this.weekendList=res.data.data.weekendList
				}
			}
		},
		mounted(){
			this.lastCity=this.city
			this.getHomeInfo()
		},
		activated(){			//使用 keepalive 时就会有 activated 这个生命周期 表示从新显示的时候执
			if(this.lastCity!==this.city){
				this.lastCity=this.city
				this.getHomeInfo()			//解决 切换城市 显示对应的城市的ajax内容
			}
		}
	}
</script>